<template>
  <div class="container">
    <div class="clearfix">
      <el-button type="success" plain icon="el-icon-back" size="small" style="display:block;float:right;margin:15px 15px 0 0;" @click="goBack">返回上一页</el-button>
    </div>
    <el-row :gutter="20" class="p-t-15">
      <!-- 上架状态专题总数 -->
      <el-col>
        <el-card class="box-card">
          <div class="thematic-detail-card">
            <div class="item-card">
              <p>专内容标题：内容标题内容标题内容标题内容标题内容标题内容标题内容标题…</p>
              <p>真实热度值：5212</p>
              <p>专题名：专题名专题名专题名</p>
            </div>
            <div class="item-card">
              <p>样式：小视频</p>
              <p>语言：英文 / 柬文</p>
              <p>标签：空的</p>
              <p>点赞：67</p>
              <p>评论：0</p>
              <p>收藏：0</p>
              <p>阅读：121</p>
              <el-button
                v-clipboard:copy="`${shareURL}/m/newSpecial/${id}?lan=zh-Hans`"
                v-clipboard:success="onCopySuccess"
                v-clipboard:error="onCopyError"
                type="primary"
                size="small">预览</el-button>
            </div>
            <div class="item-card">
              <p>更新时间：2020-06-09  14:23:23</p>
              <p>创建时间：2020-06-09  14:23:23</p>
            </div>
            <div class="item-card">
              <p>曝光量：300</p>
              <p>阅读量：35</p>
              <p>点赞量：5</p>
              <p>评论量：3</p>
              <p>分享量：2</p>
            </div>
            <el-row class="search-content">
              <el-col>
                <el-date-picker
                  v-model="datePicker1"
                  :picker-options="pickerOptions"
                  class="w-240"
                  size="small"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="timeChange"/>
                <el-button type="primary" icon="el-icon-search" size="small" @click="search('search')">搜索</el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="box-card">
      <el-card>
        <div id="lineChart" :style="{width: '100%', height: '480px'}"/>
      </el-card>
    </div>
    <div class="box-card">
      <el-card>
        <div slot="header" class="clearfix">
          <span>每日报表</span>
        </div>
        <div class="clearfix">
          <div class="button-list">
            <el-button type="primary" @click="toExport()">导出</el-button>
          </div>
        </div>
        <div class="list-content">
          <el-table
            v-loading="listLoading"
            id="newsTable"
            ref="newsTable"
            :data="tableData"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            style="width: 100%;margin-top:20px;">
            <el-table-column prop="id" label="日期"/>
            <el-table-column prop="id" label="访问PV"/>
            <el-table-column prop="id" label="访问UV"/>
            <el-table-column prop="id" label="专题内容阅读"/>
            <el-table-column prop="id" label="曝光阅读转化率"/>
          </el-table>
          <div v-if="total>0" class="block fr">
            <el-pagination
              :current-page="listQuery.index"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.size"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { dateShortcutKeyJS } from '@/mixins/index.js';
import timeUtils from '@/utils/timeHandle.js';
import { exportJsonToExcel, formatJson } from '@/utils/excel/Export2Excel';
import '@/assets/css/common/style.scss';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      tableName: {
        add: '英柬文',
        pass: '中文'
      },
      listRatio: [
        {
          'date': '2020-09-19',
          'strategy_0': 5.4,
          'strategy_-2': 2.4,
          'strategy_-1': 3.4,
          'strategy_-3': 3.3
        },
        {
          'date': '2020-09-29',
          'strategy_0': 15.66,
          'strategy_-2': 5.66,
          'strategy_-1': 8.66,
          'strategy_-3': 7
        },
        {
          'date': '2020-09-18',
          'strategy_0': 12.39,
          'strategy_-2': 3.39,
          'strategy_-1': 1.39,
          'strategy_-3': 5
        },
        {
          'date': '2020-09-28',
          'strategy_0': 8.53,
          'strategy_-2': 9.53,
          'strategy_-1': 2.53,
          'strategy_-3': 6.4
        },
        {
          'date': '2020-09-17',
          'strategy_0': 5.57,
          'strategy_-2': 3.57,
          'strategy_-1': 6.57,
          'strategy_-3': 3.8
        },
        {
          'date': '2020-09-27',
          'strategy_0': 5.16,
          'strategy_-2': 7.16,
          'strategy_-1': 4.16,
          'strategy_-3': 3.3
        },
        {
          'date': '2020-09-16',
          'strategy_0': 4.68,
          'strategy_-2': 3.68,
          'strategy_-1': 2.68,
          'strategy_-3': 6.6
        },
        {
          'date': '2020-09-11',
          'strategy_0': 4.36,
          'strategy_-2': 6.36,
          'strategy_-1': 7.36,
          'strategy_-3': 3.3
        },
        {
          'date': '2020-09-22',
          'strategy_0': 4.45,
          'strategy_-2': 5.45,
          'strategy_-1': 9.45,
          'strategy_-3': 8.8
        },
        {
          'date': '2020-09-10',
          'strategy_0': 3.11,
          'strategy_-2': 4.11,
          'strategy_-1': 6.11,
          'strategy_-3': 6.6
        },
        {
          'date': '2020-09-21',
          'strategy_0': 4.66,
          'strategy_-2': 3.66,
          'strategy_-1': 6.66,
          'strategy_-3': 3.3
        },
        {
          'date': '2020-09-30',
          'strategy_0': 9.71,
          'strategy_-2': 4.71,
          'strategy_-1': 7.71,
          'strategy_-3': 8.8
        },
        {
          'date': '2020-09-15',
          'strategy_0': 4.37,
          'strategy_-2': 3.37,
          'strategy_-1': 5.37,
          'strategy_-3': 4.5
        },
        {
          'date': '2020-09-25',
          'strategy_0': 2.1,
          'strategy_-2': 1.1,
          'strategy_-1': 3.1,
          'strategy_-3': 6.4
        },
        {
          'date': '2020-09-14',
          'strategy_0': 3.64,
          'strategy_-2': 4.64,
          'strategy_-1': 6.64,
          'strategy_-3': 3.3
        },
        {
          'date': '2020-09-24',
          'strategy_0': 4.27,
          'strategy_-2': 5.27,
          'strategy_-1': 6.27,
          'strategy_-3': 3
        },
        {
          'date': '2020-09-23',
          'strategy_0': 9.94,
          'strategy_-2': 8.94,
          'strategy_-1': 3.94,
          'strategy_-3': 2
        },
        {
          'date': '2020-09-12',
          'strategy_0': 2.12,
          'strategy_-2': 3.12,
          'strategy_-1': 5.12,
          'strategy_-3': 8
        },
        {
          'date': '2020-10-01',
          'strategy_0': 5.02,
          'strategy_-2': 3.02,
          'strategy_-1': 2.02,
          'strategy_-3': 3
        }
      ],
      tableData: [{
        id: 666
      }],
      listLoading: false,
      submitLoading: false,
      total: 1,
      listQuery: {
        index: 1,
        size: 10
      },
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ], // 时间
      id: '',
      shareURL: '', // 分享页面堍域名
      separatedDays: null // 搜索时间相隔天数
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.shareURL = process.env.SHARE_URL;
    this.getData3();
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一层
    },
    getData3() {
      var list = {
        'strategy_0': [],
        'strategy_-2': [],
        'strategy_-1': [],
        'strategy_-3': [],
        'date': []
      };

      for (var w = 0; w < this.listRatio.length; w++) {
        Object.keys(list).forEach(key => {
          list[key].push(this.listRatio[w][key]);
        });
      }

      this.listRatio = list;
      this.$nextTick(function() {
        this.updateEchart3();
      });
    },
    /* 拆线图 */
    updateEchart3() {
      var myChart = echarts.init(document.getElementById('lineChart'));
      myChart.showLoading();
      const option = {
        title: {
          text: '数据趋势'
        },
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['访问PV', '访问UV', '专题内容阅读', '曝光阅读转化率'],
          right: 60,
          top: 10
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            type: 'category',
            data: this.listRatio['date']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(次数)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '访问PV',
            type: 'line',
            data: this.listRatio['strategy_0']
          },

          {
            name: '访问UV',
            type: 'line',
            data: this.listRatio['strategy_-1']
          },

          {
            name: '专题内容阅读',
            type: 'line',
            data: this.listRatio['strategy_-2']
          },
          {
            name: '曝光阅读转化率',
            type: 'line',
            data: this.listRatio['strategy_-3']
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    /* 时间选择 */
    timeChange(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(Math.abs(endTime - startTime) / (24 * 3600 * 1000));
      this.separatedDays = Days;
      if (Days == 0) {
        this.listQuery.dateType = 0;
      } else if (Days <= 30 && Days > 0) {
        this.listQuery.dateType = 1;
      } else if (Days > 30 && Days <= 48) {
        this.listQuery.dateType = 2;
      } else if (Days > 48) {
        this.listQuery.dateType = 3;
      }
    },
    // 搜索
    search() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      if (this.separatedDays === 0) {
        this.onlyOneDay = true;
      } else {
        this.onlyOneDay = false;
      }

      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];
    },
    // 分页改变
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },
    // 复制成功
    onCopySuccess() {
      this.$message({
        message: '复制成功！',
        type: 'success'
      });
    },
    // 复制失败
    onCopyError() {
      this.$message({
        message: '复制失败！',
        type: 'error'
      });
    },
    /* 导出 */
    toExport() {
      const tableData = this.tableData;
      const tHeader = [
        '日期',
        '访问PV',
        '访问UV',
        '专题内容阅读',
        '曝光阅读转化率'
      ];
      const tKey = [
        'id',
        'id',
        'id',
        'id',
        'id'
      ];
      const title = '专题内容报表';
      // 数据来源
      const data = formatJson(tKey, tableData); // 数据格式化
      const newDay = timeUtils.timeHandle(new Date().getTime(), 'date');
      const fileName = `${title}${newDay}`; // 导出时文件名
      exportJsonToExcel(tHeader, data, fileName); // 导出文件
    }
  }
};
</script>
<style lang="scss" scoped>
.w-150 {
  width: 150px;
}
/* 标签盒子 */
.box-card {
  margin: 0 0 20px 0;
}
.thematic-detail-card {
  .item-card {
    p {
      display: inline-block;
      margin: 0 30px 0 0;
    }
    line-height: 32px;
    .thematic-thumb {
      width: 340px;
      height: auto;
    }
  }
}
.search-content {
  margin: 30px 0 0 0;
}
/* 表格tab */
.button-list {
  float: right;
}
.list-content {
  overflow: hidden;
}
.block {
  margin: 20px 0 0 0;
}
</style>

